import { useEffect, useRef } from 'react'
import { MaterialPanel } from '@/layout'
import { Droppable, Draggable } from '@shopify/draggable'
import { MantineProvider, Button } from '@mantine/core';

import AttributePanel from './layout/AttributePanel';
import { Viewer } from './layout/Viewer';
import classnames from 'classnames'
import { NAV_HEIGHT } from './settings';

import '@mantine/core/styles.css';
import './App.css'

function App() {
  const dragRef = useRef<HTMLDivElement>(null);

  return (
    <MantineProvider>
      <nav style={{ height: `${NAV_HEIGHT}px` }} className={classnames('border-b-[1px] border-gray-200 flex justify-between items-center', `h-[${NAV_HEIGHT}px]`)}>
        <div className='ml-2 font-bold'>ECharts 编辑器</div>
        <div className='mr-2'>
          <Button size='xs'>登 录</Button>
        </div>
      </nav>

      <div ref={dragRef} className='w-full flex overflow-y-scroll' style={{ height: `calc(100vh - ${NAV_HEIGHT}px)` }}>
        <MaterialPanel />
        <Viewer />
        <AttributePanel />
      </div>
    </MantineProvider>
  )
}

export default App
